$(function() {
	/* 1. 数据展示 */
	var currentPage = 1
	var render = function() {
		// 1.1 初始化页面
		getUserData({
			page: currentPage,
			pageSize: 1
		}, function(res) {
			// console.log(res)
			// 1.2 模板渲染
			$('.table tbody').html(template('listTpl', res))
			
			// 2.0 分页展示渲染
			setPaginator(res.page, Math.ceil(res.total / res.size), render)
		})
	}
	render()
	
	/* 2. 分页展示 */
	var setPaginator = function (cp, pages, callback) {
		// 2.1 初始化配置 
        var options = {
        	bootstrapMajorVersion: 3,  // 版本信息
        	size: 'small',             // 字体为小号
        	currentPage: cp,           // 当前页面  
        	totalPages: pages,         // 总页数 
        	onPageClicked: function (event, originalEvent, typePage, curPage) { // 点击页面事件
            	// 事件：typePage是被点击的页码
            	// 2.2 获取当前点击的页数
            	// console.log(curPage)
            	// 2.3 重新请求渲染
            	currentPage = curPage
            	callback && callback()
           	}
        }
		$('.pagination').bootstrapPaginator(options)
	}
	
	/* 3. 启用和禁用用户 */
	$('.table tbody').on('click', '.btn', function() {
		// 3.1 获取id 和 isDelete
		var id = $(this).data('id')
		var name = $(this).data('name')
		// 3.2 查看当前的isDelete的值 1 表示启用
		var isDelete = $(this).hasClass('btn-danger') ? 0 : 1
		// 3.3 模态提示框显示
		// 3.3.1 拼接用户到模态框上
		var toggleVal = $(this).hasClass('btn-danger') ? '禁用' : '启用'
		$('#optionModal').find('strong').html(toggleVal + name)
		// 3.3.1 显示提示模态框
		$('#optionModal').modal('show')
		// 3.4  点击确定发请求 启用/禁用该用户
		$('#optionModal').off('click', '.btn-primary').on('click', '.btn-primary', function() {
			$.ajax({
				url: '/user/updateUser',
				type: 'post',
				data: {
					id: id,
					isDelete: isDelete
				},
				success: function(res) {
					if (res.success) { // 成功
						// 3.4.2 重新渲染
						render()
						// 3.4.3 隐藏模态框
						$('#optionModal').modal('hide')
					}
				}
			})
		})
	})
})

var getUserData = function(params, callback) {
	$.ajax({
		type: "get",
		url: "/user/queryUser",
		async: true,
		data: params,
		dataType: 'json',
		success: function(res) {
			callback && callback(res)
		}
	})
}
